<template>
  <div class="item">
    <el-card shadow="hover" class="yj">
      <el-row>
        <el-col class="text divdd" :span="4" title="设备名称">{{this.data.name}}</el-col>
        <el-col class="text divdd" :span="4" title="IP">{{this.data.ip}}</el-col>
        <el-col class="text divdd" :span="4" title="备注">{{this.data.devdesc ? this.data.devdesc: '无备注'}}</el-col>

        <!-- 软设备的设备 -->
        <el-col v-show="this.data.isprober ==='NO'" class="text" :span="1" title="协议类型">
          <el-tag size="mini">{{this.data.protocol}}</el-tag>
        </el-col>
        <el-col v-show="this.data.isprober ==='NO'" class="text" :span="1" title="端口">{{this.data.port}}</el-col>
        <el-col v-show="this.data.isprober ==='NO'" class="text" :span="3" title="登录账号">{{this.data.username}}</el-col>
        <el-col v-show="this.data.isprober ==='NO'" class="text" :span="2" title="设备状态">
          <el-tag v-show="data.isremote" title="正在远程控制中" type="danger" size="mini"><i class="el-icon-place"></i>控制中</el-tag>
          <el-tag v-show="!data.isremote" type="success" size="mini"><i class="el-icon-sunny"></i>空闲</el-tag>
        </el-col>

        <!-- 设备的设备 -->
        <el-col v-show="this.data.isprober ==='YES'" class="text" :span="5" title="操作系统">
          <el-tag size="mini">{{this.data.os}}</el-tag>
        </el-col>
        <el-col v-show="this.data.isprober ==='YES'" class="text" :span="2" title="设备状态">
          <el-tag disable-transitions v-show="data.isremote" title="正在远程控制中" type="danger" size="mini"><i class="el-icon-place"></i>控制中</el-tag>
          <el-tag disable-transitions v-show="data.isonline && !data.isremote" type="success" size="mini"><i class="el-icon-sunny"></i>在线</el-tag>
          <el-tag disable-transitions v-show="!data.isonline" type="info" size="mini"><i class="el-icon-moon"></i>离线</el-tag>
        </el-col>

        <el-col :span="5" class="menu-panel">
          <el-button v-show="config.rights.device_device_manager" title="修改备注信息" @click="onShowDeviceDialog" size="mini" type="primary" icon="el-icon-edit" circle></el-button>
          <el-button @click="onShowRemoteDialog" v-show="config.rights.device_remotecpe && ((!data.isremote && data.isonline) || (data.isprober ==='NO' && !data.isremote))" title="远程控制" size="mini" type="success" icon="el-icon-mouse" circle></el-button>
          <el-button v-show="config.rights.device_remotecpe && !data.isremote && data.isonline" @click="onShutdown" title="关机" size="mini" type="primary" icon="el-icon-switch-button" circle></el-button>
          <el-button v-show="config.rights.device_device_manager" title="置顶" @click="onTop" size="mini" type="primary" icon="el-icon-top" circle></el-button>
          <el-button v-show="config.rights.device_device_manager && !data.isremote" @click="onDelete" class="delbtn" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog title="设备信息" :visible.sync="deviceDialog.visible" width="50%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <el-form size="mini" label-width="80px">
        <el-form-item label="设备名称 *">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="备注 *">
          <el-input v-model="form.devdesc"></el-input>
        </el-form-item>
        <div v-show="this.data.isprober ==='NO'">
          <el-form-item label="IP *">
            <el-input placeholder="请输入IP地址" v-model="form.ip"></el-input>
          </el-form-item>
          <el-form-item label="端口 *">
            <el-input style="width:200px;" type="number" placeholder="请输入端口" v-model="form.port"></el-input>
          </el-form-item>
          <el-form-item label="协议类型">
            <el-radio-group v-model="form.protocol">
              <el-radio label="VNC">VNC协议</el-radio>
              <el-radio label="RDP">RDP协议</el-radio>
              <el-radio label="SSH">SSH</el-radio>
              <el-radio label="TELNET">TELNET</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-show="form.protocol === 'RDP' || form.protocol === 'SSH'" label="登录账号 *">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item v-show="form.protocol === 'RDP' || form.protocol === 'SSH'" label="密码">
            <el-input show-password v-model="form.password"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="设备节点">
          <el-input disabled v-model="form.nodeName" style="width:200px;"></el-input>
          <el-button @click="showNodeDialog">移动</el-button>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="onCloseDeviceDialog" size="mini">取 消</el-button>
        <el-button @click="onUpdateDeviceNodeSubmit" type="primary" size="mini">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="设备节点" :visible.sync="nodeDialog.visible" width="50%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <div style="height:300px;">
        <el-scrollbar style="height:100%">
          <el-tree ref="addNodeTree" :expand-on-click-node="false" @node-click="onTreeNodeClick" highlight-current :default-checked-keys="nodeDialog.curkeys" :check-strictly="true" :data="nodeDialog.treeData" node-key="id" :props="nodeDialog.defaultProps">
          </el-tree>
        </el-scrollbar>
      </div>
      <span slot="footer" class="dialog-footer">
        <span style="color:#606266">已选节点：</span>
        <el-tag size="mini">{{this.nodeDialog.selectNode ? this.nodeDialog.selectNode.label : '无'}}</el-tag>
        <el-button style="margin-left:50px;" @click="closeNodeDialog" size="mini">取 消</el-button>
        <el-button type="primary" @click="onUpdateDeviceNodePendingSubmit" size="mini">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog class="dialog-remote" :visible.sync="remoteDialog.visible" width="50%">
      <div style="height:350px;">
        <div v-show="data.isprober ==='YES'" class="dialog-remote-desc">
          <div style="padding-top:10px;color:#E6A23C">请确保被控计算机 5900 端口不被占用</div>
        </div>
        <div v-show="data.isprober ==='NO'" style="padding-left:35%;">
          <div style="padding-top:10px;color:#E6A23C">协议类型 {{data.protocol}}</div>
          <div style="padding-top:10px;color:#E6A23C">远程IP {{data.ip}}</div>
          <div style="padding-top:10px;color:#E6A23C">请确保被控计算机 {{data.port}} 端口不被占用</div>
          <div v-show="data.protocol ==='RDP' || data.protocol ==='SSH'" style="padding-top:10px;color:#E6A23C">登录账号 {{data.username}}</div>
        </div>
        <el-divider></el-divider>
        <div class="dialog-remote-start-remote-panel">
          <div v-show="remoteDialog.color === 'COLOR8'" style="padding-bottom:10px;color:#409EFF">画质: 流畅</div>
          <div v-show="remoteDialog.color === 'COLOR16'" style="padding-bottom:10px;color:#409EFF">画质: 标清（推荐）</div>
          <div v-show="remoteDialog.color === 'COLOR32'" style="padding-bottom:10px;color:#409EFF">画质: 高清</div>
          <div style="margin-bottom:10px;">
            <el-radio v-model="remoteDialog.color" label="COLOR8">流畅</el-radio>
            <el-radio v-model="remoteDialog.color" label="COLOR16">标清</el-radio>
            <el-radio v-model="remoteDialog.color" label="COLOR32">高清</el-radio>
          </div>
          <el-button :loading="remoteDialog.loadingBtn" @click="onStartRemote" class="dialog-remote-start-remote-btn" type="primary">开始远程</el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "DeviceItem",
  props: ["data", "onDeleteDevice", "onTopDevice"],
  data() {
    return {
      remoteDialog: {
        color: "COLOR16",
        loadingBtn: false,
        remoteType: "vnc",
        visible: false,
      },
      nodeDialog: {
        selectNode: null,
        visible: false,
        treeData: [],
        defaultProps: {
          children: "children",
          label: "label",
        },
      },
      form: {
        name: "",
        devdesc: "",
        nodeId: "",
        nodeName: "",
        oldNodeId: "",
        ip: "",
        port: "",
        protocol: "",
        username: "",
        password: "",
      },
      deviceDialog: {
        visible: false,
      },
    };
  },
  methods: {
    onStartRemote() {
      this.remoteDialog.loadingBtn = true;
      this.utils.http(
        "post",
        "/webapi/remotecpe/start",
        {
          deviceId: this.data.id,
          type: "vnc",
          localPort: "5900",
          color: this.remoteDialog.color,
        },
        (resp) => {
          this.data.isremote = true;
          this.remoteDialog.visible = false;
          this.remoteDialog.loadingBtn = false;
          this.utils.emit("event_remote_add", {
            uuid: resp.uuid,
            name: this.data.name,
            active: true,
            isprober: this.data.isprober,
          });
        },
        (emsg) => {
          this.remoteDialog.loadingBtn = false;
          this.$notify({
            title: "错误",
            message: emsg,
            type: "error",
          });
        }
      );
    },
    onShowRemoteDialog() {
      this.remoteDialog.visible = true;
      this.remoteDialog.color = "COLOR16";
    },
    onShutdown() {
      this.utils.http(
        "post",
        "/webapi/remotecpe/shutdown",
        {
          deviceId: this.data.id,
        },
        () => {
          this.$notify({
            title: "关机提示",
            message: "关机指令发送成功",
            type: "success",
          });
        }
      );
    },
    onTop() {
      this.utils.http(
        "post",
        "/webapi/device/top/update",
        {
          deviceId: this.data.id,
        },
        () => {
          this.onTopDevice(this.data.id);
        }
      );
    },
    onUpdateDeviceNodeSubmit() {
      if (this.data.isprober === "NO") {
        if (
          !this.form.devdesc ||
          !this.form.name ||
          !this.form.ip ||
          !this.form.port
        ) {
          this.$message({
            type: "warning",
            message: "参数填写未完整",
          });
          return;
        }

        if (this.form.protocol == "RDP" || this.form.protocol == "SSH") {
          if (!this.form.username) {
            this.$message({
              type: "warning",
              message: "参数填写未完整",
            });
            return;
          }
        }
      } else {
        if (!this.form.devdesc || !this.form.name) {
          this.$message({
            type: "warning",
            message: "参数填写未完整",
          });
          return;
        }
      }

      this.utils.http(
        "post",
        "/webapi/device/update",
        {
          deviceId: this.data.id,
          devdesc: this.form.devdesc,
          name: this.form.name,
          nodeId: this.form.nodeId,
          ip: this.form.ip,
          port: this.form.port,
          protocol: this.form.protocol,
          username: this.form.username,
          password: this.form.password,
        },
        () => {
          this.$notify({
            title: "编辑提示",
            message: "编辑成功",
            type: "success",
          });
          this.data.name = this.form.name;
          this.data.devdesc = this.form.devdesc;
          this.data.ip = this.form.ip;
          this.data.port = this.form.port;
          this.data.protocol = this.form.protocol;
          this.data.username = this.form.username;
          if (this.form.nodeId !== this.form.oldNodeId) {
            this.onDeleteDevice(this.data.id);
          }
          this.onCloseDeviceDialog();
        }
      );
    },
    onTreeNodeClick(node) {
      if (node.pid === "0") {
        return;
      }
      this.nodeDialog.selectNode = node;
    },
    onUpdateDeviceNodePendingSubmit() {
      if (!this.nodeDialog.selectNode) {
        this.$notify({
          title: "移动提示",
          message: "移动节点未选择",
          type: "warning",
        });
        return;
      }
      this.closeNodeDialog();
      this.form.nodeId = this.nodeDialog.selectNode.id;
      this.form.nodeName = this.nodeDialog.selectNode.label;
    },
    showNodeDialog() {
      this.nodeDialog.visible = true;
      this.nodeDialog.treeData = [];
      this.nodeDialog.curkeys = [];
      this.nodeDialog.selectNode = null;
      this.utils.http("get", "/webapi/device/node/tree", {}, (resp) => {
        this.nodeDialog.treeData = resp;
      });
    },
    closeNodeDialog() {
      this.nodeDialog.visible = false;
    },
    onShowDeviceDialog() {
      this.deviceDialog.visible = true;
      this.form.name = this.data.name;
      this.form.devdesc = this.data.devdesc;
      this.form.ip = this.data.ip;
      this.form.port = this.data.port;
      this.form.protocol = this.data.protocol;
      this.form.username = this.data.username;

      this.utils.http(
        "get",
        "/webapi/device/node/devicenode/info/get",
        {
          deviceId: this.data.id,
        },
        (resp) => {
          this.form.nodeId = resp.id;
          this.form.nodeName = resp.title;
          this.form.oldNodeId = resp.id;
        }
      );
    },
    onCloseDeviceDialog() {
      this.deviceDialog.visible = false;
      this.form.name = "";
      this.form.devdesc = "";
      this.form.nodeId = "";
      this.form.nodeName = "";
      this.form.oldNodeId = "";
      this.form.ip = "";
      this.form.port = "";
      this.form.protocol = "";
      this.form.username = "";
      this.form.password = "";
    },
    onDelete() {
      this.$confirm(`确定删除 ${this.data.name} 设备？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.utils.http(
            "post",
            "/webapi/device/delete",
            {
              deviceId: this.data.id,
            },
            () => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.onDeleteDevice(this.data.id);
            }
          );
        })
        .catch(() => {});
    },
  },
  mounted() {},
};
</script>

<style>
.dialog-remote .el-dialog__body {
  padding: 0px 20px;
}

.dialog-remote .el-dialog__body .dialog-remote-desc {
  padding: 20px;
  text-align: center;
  font-size: 14px;
}

.dialog-remote .el-dialog__body .dialog-remote-start-remote-panel {
  text-align: center;
}

.dialog-remote
  .el-dialog__body
  .dialog-remote-start-remote-panel
  .dialog-remote-start-remote-btn {
  width: 300px;
}
</style>

